<script>
import { getList, read } from './api'
export default {
  props: {
    //  read 已读， unread 未读
    type: {
      type: String,
      default: 'read',
    },
  },
  data() {
    return {
      getList,
    }
  },
  computed: {},
  watch: {},
  created() {
    read()
  },
  mounted() {},
  methods: {
    dealQueryFun(query) {
      query.type = this.type
    },
  },
}
</script>

<template>
  <div class="list">
    <PullRefreshScrollLoadList :request="getList" :dealQueryFun="dealQueryFun">
      <template v-slot="list">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="list-title">{{ item.title }}</div>
          <div class="list-info">
            {{ item.content }}
          </div>
          <div class="list-time">{{ item.notificationTime }}</div>
        </div>
      </template>
    </PullRefreshScrollLoadList>
  </div>
</template>

<style lang="less" scoped>
.list {
  padding: 10px;
  overflow: auto;
  .list-item {
    padding: 10px 15px;
    background: #fff;
    border-radius: 8px;
    & + .list-item {
      margin-top: 10px;
    }
    .list-title {
      font-weight: 500;
      font-size: 16px;
    }
    .list-info {
      // color: #b5b8c0;
      margin: 10px 0;
    }
    .list-time {
      color: #b5b8c0;
      font-size: 12px;
    }
  }
}
</style>
